<div class="main-box" [ngStyle]="tagData.cssStyle | styleFilter">
  <ng-container *ngIf="tagData.data?.data?.headDiv">
    <div [ngStyle]="tagData.data?.data?.headDiv?.cssStyle|styleFilter">
      <div class="headDiv">
        <p class="headDivP" *ngIf="tagData.data?.data?.headDiv?.labelText"
          [ngStyle]="tagData.data?.data?.headDiv?.moreLink?.link?.params?.labelTextCssStyle|styleFilter">
          {{tagData.data?.data?.headDiv?.labelText}}</p>
        <div class="moreLinkDiv" appDebounceClick (debounceClick)="detailPage(tagData.data?.data?.headDiv?.moreLink)">
          <span class="moreLinkLabel"
            [ngStyle]="tagData.data?.data?.headDiv?.moreLink?.params?.moreLinkCssStyle|styleFilter">{{tagData.data?.data?.headDiv?.moreLink?.label}}</span>
          <img class="moreLinkIcon" *ngIf="tagData.data?.data?.headDiv?.moreLink?.iconUrl"
            [ngStyle]="tagData.data?.data?.headDiv?.moreLink?.params?.linkIconCssStyle|styleFilter"
            src='assets/icon/arrow_icon_right@3x.png' />
        </div>
      </div>
      <p class="noData" *ngIf="listData&&listData.length === 0">
        {{tagData.hint}}
      </p>
    </div>
  </ng-container>
  <ng-container *ngIf="tagData.data.data?.data?.data">
    <div class="title-box2" *ngIf="tagData?.data?.data?.titleLeft || tagData?.data?.data?.titleright"
      [ngStyle]="tagData.data?.data?.data?.link?.params?.titleBoxCssStyle|styleFilter">
      <span class="title-content-2" *ngIf="tagData?.data?.data?.titleLeft">{{tagData?.data?.data?.titleLeft}}</span>
      <span class="margin75" *ngIf="tagData?.data?.data?.data?.link" appDebounceClick (debounceClick)="openPage(tagData?.data?.data?.data)"
        [ngStyle]="tagData?.data?.data?.data?.link?.cssStyle|styleFilter">
        <ng-container *ngIf="tagData?.data?.data?.data?.link?.label">
          {{tagData?.data?.data?.data?.link?.label}}
        </ng-container>
        <img class="arrowIcon 1" *ngIf="tagData?.data?.data?.data?.link?.param?.hiddenIcon === undefined"
          src="{{tagData?.data?.data?.data?.link.iconUrl}}" onerror="this.src='assets/fw/arrow@3x.png'" />
      </span>
    </div>
  </ng-container>
  <ng-container *ngIf="!tagData.data.data?.data?.data">
    <div class="title-box" *ngIf="tagData?.data?.data?.titleLeft || tagData?.data?.data?.titleright">

      <div>
        <span class="title-content" *ngIf="tagData?.data?.data?.titleLeft">{{tagData?.data?.data?.titleLeft}}</span>
        <span *ngIf="tagData?.data?.data?.titleLeft && tagData?.data?.data?.titleright"
          class="title-dividing-line"></span>
        <span class="title-content" *ngIf="tagData?.data?.data?.titleright">{{tagData?.data?.data?.titleright}}</span>
      </div>

      <span class="margin75" *ngIf="tagData?.data?.data.titlerightLink"
        appDebounceClick (debounceClick)="openPage(tagData?.data?.data.titlerightLink)">
        <ng-container *ngIf="tagData?.data?.data.titlerightLink.label">
          {{tagData?.data?.data.titlerightLink.label}}
        </ng-container>
        <img class="arrowIcon 2" *ngIf="tagData?.data?.data?.titlerightLink?.link.iconUrl"
          src="{{tagData?.data?.data?.titlerightLink?.link.iconUrl}}" onerror="this.src='assets/fw/arrow@3x.png'" />
      </span>
    </div>
  </ng-container>
  <!--新增标题左下标签-->
  <div class="title-div-with-bottom" [ngStyle]="tagData?.data?.data?.titleBottomBoxCssStyle|styleFilter">
    <span class="title-h1-with-bottom" *ngIf="tagData?.data?.data?.title"
      [ngStyle]="tagData?.data?.data?.titleCssStyle|styleFilter">{{tagData?.data?.data?.title}}</span>
    <span class="sub-title-with-bottom"
      *ngIf="tagData?.data?.data?.leftBottomLabel">{{tagData?.data?.data?.leftBottomLabel[0].label}}<img
        appDebounceClick (debounceClick)="openPage(tagData?.data?.data?.leftBottomLabel[0])"
        *ngIf="tagData?.data?.data?.leftBottomLabel[0].iconName" class="img-title-with-bottom"
        src="{{tagData?.data?.data?.leftBottomLabel[0].iconName}}"
        onerror="this.src='assets/icon/icon_help_notes_bak@3x.png'" /></span>
    <span class="sub-title-with-bottom1"
      *ngIf="tagData?.data?.data?.leftBottomLabel&&tagData?.data?.data?.leftBottomLabel[0]">{{tagData?.data?.data?.leftBottomLabel[0].label2}}</span>
  </div>
  <ng-container *ngIf="tagData.name==='newStyle'">
    <div class="achieveTop" [ngStyle]="tagData?.data?.data?.achieveTopBoxCssStyle|styleFilter"
      [ngClass]="{'achieveTopBoxCssStyle': tagData?.data?.data?.achieveTopBoxCssStyle}">
      <ng-container *ngFor="let item of tagData.data?.data?.data">
        <div class="achieveLeft" appDebounceClick (debounceClick)="detailPage(item?.link)">
          <span [ngStyle]="item.tipsCssStyle|styleFilter">{{item.tips}}
            <img *ngIf="item.labelIcon" [ngStyle]="item.labelIcon|styleFilter" class="arrowIcon 3"
              src="{{item.labelIcon}}" onerror="this.src='assets/fw/arrow_reply.png'" />
          </span>

          <span [ngStyle]="item.labelCssStyle|styleFilter">
            {{(getInterger(item.label - 0) | currency:'CNY':'':'1.0-0')}}
            <i class="price-digits-new2" *ngIf="item.showDigitsCssStyle"
              [ngStyle]="item?.moneyDigitsCssStyle|styleFilter">{{(item.label
              - 0 | currency:'CNY':'':'0.2-2')+''|slice:-3}}</i>
              <span *ngIf="item.unit" [ngStyle]="item.unitCssStyle|styleFilter">{{item.unit}}
              </span>
          </span>
        </div>        
      </ng-container>
    </div>
    <div class="tabsBox" [ngStyle]="tagData?.data?.data?.tabsBoxCssStyle|styleFilter">


      <ng-container *ngIf="tagData?.data?.data?.tabCssType; else elseDefaultTemplate">
        <div class="switchBox" [ngStyle]="tagData?.data?.data?.switchBoxCssStyle|styleFilter">
          <div class="topLeftBox" [ngStyle]="tagData?.data?.data?.topLeftBoxCssStyle|styleFilter">
            <ng-container *ngFor="let item of tagData.data?.data?.tab;let i=index;">
              <span appDebounceClick (debounceClick)="tabClick($event,i+'',tagData.data.data)"
                [ngClass]="{'checkTab': tagData?.data?.data?.checkTabIndex===i+'','unCheckTab':tagData?.data?.data?.checkTabIndex!==i+''}">{{item.label}}</span>
            </ng-container>
          </div>
        </div>
        <Tabs [page]="5" [swipeable]="false" [animated]="true" [useOnPan]="false"
          [tabBarBackgroundColor]="tabBarBackGroundColor" [activeTab]="index"
          [tabBarUnderlineStyle]="tabBarUnderlineStyle" [tabBarActiveTextColor]="'#252629'"
          [tabTitleSize]="tabTitleSize" [tabBarTextStyle]="tabBarTextStyle" (onTabClick)="onChange($event)">
          <TabPane [title]="titleTemplate" *ngFor="let item of tagData.data?.data?.tab;let i=index;">
            <ng-template #titleTemplate>
              <ng-container *ngIf="i===0">
                <div [ngStyle]="titleBarStyle|styleFilter" class="firstTab borderLeftUnset" id="switchBoxTabPane{{i}}">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
              <ng-container *ngIf=" i >0 && i < tabLength">
                <div [ngStyle]="titleBarStyle|styleFilter" class="borderLeftUnset" id="switchBoxTabPane{{i}}">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
              <ng-container *ngIf="i===tabLength">
                <div [ngStyle]="titleBarStyle|styleFilter" class="borderLeftUnset"
                  style="border-radius: 0rem 0.31rem 0.31rem 0rem;" id="switchBoxTabPane{{i}}">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
            </ng-template>
            <div class="paneBox2" [ngStyle]="tagData?.data?.data?.paneBoxCssStyle|styleFilter">
              <ng-container *ngFor="let subItem of item.list;let j = index;">
                <div class="leftBox2" [ngStyle]="subItem.boxCssStyle|styleFilter" appDebounceClick (debounceClick)="detailPage(subItem.link)">
                  <span [ngStyle]="subItem.tipsCssStyle|styleFilter">{{subItem.tips}}
                    <img *ngIf="subItem.tipsIconCssStyle" [ngStyle]="subItem.tipsIconCssStyle|styleFilter"
                      class="arrowIcon 4" src="assets/fw/arrow_reply.png" />
                  </span>
                  <span [ngStyle]="subItem.labelCssStyle|styleFilter">
                    {{(getInterger(subItem.label - 0) | currency:'CNY':'':'1.0-0')}}
                    <i class="price-digits-new" [ngStyle]="subItem?.moneyDigitsCssStyle|styleFilter">{{(subItem.label
                      - 0 | currency:'CNY':'':'0.2-2')+''|slice:-3}}</i>
                      <span *ngIf="subItem.unit" [ngStyle]="subItem.unitCssStyle|styleFilter">{{subItem.unit}}
                      </span>
                  </span>
                  
        
                </div>
                <div *ngIf="j!==2&&j!==4" class="spline2"></div>
              </ng-container>
            </div>
          </TabPane>
        </Tabs>
      </ng-container>


      <!--原tab页面-->
      <ng-template #elseDefaultTemplate>
        <Tabs [page]="5" [swipeable]="false" [animated]="true" [useOnPan]="false"
          [tabBarBackgroundColor]="tabBarBackGroundColor" [activeTab]="index"
          [tabBarUnderlineStyle]="tabBarUnderlineStyle" [tabBarActiveTextColor]="'#252629'"
          [tabTitleSize]="tabTitleSize" [tabBarTextStyle]="tabBarTextStyle" (onTabClick)="onChange($event)">
          <TabPane [title]="titleTemplate" *ngFor="let item of tagData.data?.data?.tab;let i=index;">
            <ng-template #titleTemplate>
              <ng-container *ngIf="i===0">
                <div [ngStyle]="titleBarStyle|styleFilter" class="firstTab">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
              <ng-container *ngIf=" i >0 && i < tabLength">
                <div [ngStyle]="titleBarStyle|styleFilter">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
              <ng-container *ngIf="i===tabLength">
                <div [ngStyle]="titleBarStyle|styleFilter" style="border-radius: 0rem 0.31rem 0.31rem 0rem;">
                  <p [ngClass]="{'tab-checked': i === index}">{{item.label}}</p>
                </div>
              </ng-container>
            </ng-template>
            <div class="paneBox">
              <ng-container *ngFor="let subItem of item.list;let j = index;">
                <div class="leftBox" [ngStyle]="subItem.boxCssStyle|styleFilter" appDebounceClick (debounceClick)="detailPage(subItem.link)">
                  <span [ngStyle]="subItem.tipsCssStyle|styleFilter">{{subItem.tips}}<img
                      [ngStyle]="subItem.tipsIconCssStyle|styleFilter" class="arrowIcon 5"
                      src="assets/fw/arrow_reply.png" /></span>
                  <span [ngStyle]="subItem.labelCssStyle|styleFilter">{{subItem.label}}</span>
                </div>
                <div *ngIf="j===0" class="spline"></div>
              </ng-container>
            </div>
          </TabPane>
        </Tabs>
      </ng-template>



    </div>
  </ng-container>
  <ng-container *ngIf="tagData.name==='viewStyle'">
    <ng-container *ngIf="tagData?.data?.data?.tipsDiv">
      <ng-container *ngFor="let j of tagData?.data?.data?.tipsDiv">
        <div class="tipsDiv 1" [ngStyle]="j.cssStyle|styleFilter">
          <div class="tips-main">
            <div class="main-left">
              <div class="topleft"><img src="assets/img/vip_serve.png" class="vipServe"><span
                  class="topTips">{{j.title}}</span></div>
              <span class="bottomTips">{{j.tips}}</span>
            </div>
            <div class="main-right">
              <span class="customBtn" appDebounceClick (debounceClick)="openModal(j)">{{j.link?.label}}</span>
            </div>
          </div>
        </div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="tagData.data.data?.data && tagData.data.data?.data.length < 9">
      <ul class="box">
        <div class="ulbox 1" [ngStyle]="tagData.data?.data?.ulBoxCssStyle|styleFilter">
          <ng-container *ngFor="let item of tagData?.data?.data?.data">
            <ng-container *ngIf="item.tips">
              <li class="link-item wleft50" appDebounceClick (debounceClick)="openPage(item)">
                <span class="item-label">{{item.label}}</span>
                <h4 class="item-tips">{{item.tips}}提示：</h4>
              </li>
            </ng-container>
            <ng-container *ngIf="item.tips===undefined">
              <li class="link-item wid33" [ngStyle]="item.boxCssStyle|styleFilter">
                <img class="item-img" alt="icon" src="{{item.iconName}}"
                  onerror="this.src='assets/img/personal_center_icon_achievement_icon_yw@3x.png'">
                <p class="item-title">{{item.label}}</p>
                <button [ngStyle]="item.btLabelCssStyle|styleFilter" appDebounceClick (debounceClick)="openModal(item)">{{item.btLabel}}</button>
              </li>
            </ng-container>

          </ng-container>
        </div>
      </ul>
    </ng-container>
  </ng-container>
  <ng-container *ngIf="tagData.name!=='newStyle'&&tagData.name!=='viewStyle'">
    <ng-container *ngIf="tagData?.data?.data?.tipsDiv">
      <ng-container *ngFor="let j of tagData?.data?.data?.tipsDiv">
        <div class="tipsDiv 2" [ngStyle]="j.cssStyle|styleFilter">
          <div class="tips-main">
            <div class="main-left">
              <div class="topleft"><img src="assets/img/vip_serve.png" class="vipServe"><span
                  class="topTips">{{j.title}}</span></div>
              <span class="bottomTips">{{j.tips}}</span>
            </div>
            <div class="main-right">
              <span class="customBtn" appDebounceClick (debounceClick)="openModal(j)">{{j.link?.label}}</span>
            </div>
          </div>
          <img *ngIf="j.bgIcon" src="{{j.bgIcon}}" onerror="this.src='assets/fw/vip-bg-new3x.png'" class="vipBgIcon" />
        </div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="tagData?.data?.data?.commentDiv">
      <div [ngStyle]="tagData?.data?.data?.commentDivCssStyle|styleFilter">
        <ng-container *ngFor="let k of tagData?.data?.data?.commentDiv">
          <p *ngIf="k.label" [ngStyle]="k.labelCssStyle|styleFilter">{{k.label}}</p>
        </ng-container>
      </div>
    </ng-container>
    <ng-container *ngIf="tagData.data.data?.data && tagData.data.data?.data.length < 9">
      <ul class="box">
        <div class="ulbox 2">
          <ng-container *ngFor="let item of tagData?.data?.data?.data">
            <ng-container *ngIf="item.tips">
              <li class="link-item wleft50" appDebounceClick (debounceClick)="openPage(item)">
                <span class="item-label">{{item.label}}</span>
                <h4 class="item-tips">{{item.tips}}提示：</h4>
              </li>
            </ng-container>
            <ng-container *ngIf="item.tips===undefined">
              <li class="link-item w25" [ngStyle]="item.link?.params?.itemCssStyle|styleFilter"
                appDebounceClick (debounceClick)="openModal(item)">
                <img class="item-img" alt="icon 1" src="{{item.iconName}}" [ngStyle]="item.iconNameCssStyle|styleFilter"
                  onerror="this.src='assets/img/personal_center_icon_achievement_icon_yw@3x.png'">
                <h4 class="item-title">{{item.label}}</h4>
              </li>
            </ng-container>

          </ng-container>
        </div>
      </ul>
    </ng-container>
    <ng-container *ngIf="tagData.data.data?.data && tagData.data.data?.data.length >= 9">
      <ul class="box">
        <div class="ulbox 2">
          <ng-container *ngFor="let item of tagData?.data?.data?.data">
            <ng-container *ngIf="item.tips">
              <li class="link-item wleft50" appDebounceClick (debounceClick)="openPage(item)">
                <span class="item-label">{{item.label}}</span>
                <h4 class="item-tips">{{item.tips}}提示：</h4>
              </li>
            </ng-container>
            <ng-container *ngIf="item.tips===undefined">
              <li class="link-item w25" [ngStyle]="item.link?.params?.itemCssStyle|styleFilter"
                appDebounceClick (debounceClick)="openModal(item)">
                <img class="item-img" alt="icon 2" src="{{item.iconName}}" [ngStyle]="item.iconNameCssStyle|styleFilter"
                  onerror="this.src='assets/img/personal_center_icon_achievement_icon_yw@3x.png'">
                <h4 class="item-title">{{item.label}}</h4>
              </li>
            </ng-container>

          </ng-container>
        </div>
      </ul>
    </ng-container>
    <!--1.6.33支持展开收起-->
    <ng-container *ngIf="tagData.data.data?.data?.data && tagData.data.data?.data?.data.length > 0">
      <ul class="box" [ngStyle]="tagData?.data?.data?.data?.link?.params?.ulCssStyle|styleFilter">
        <div class="ulbox 3" [ngStyle]="tagData?.data?.data?.data?.link?.params?.ulBoxCssStyle|styleFilter">
          <ng-container *ngFor="let item of tagData?.data?.data?.data?.data,let dataIndex = index;">
            <ng-container *ngIf="dataIndex < showIconLimit">
              <ng-container *ngIf="item.tips">
                <li class="link-item wleft50" appDebounceClick (debounceClick)="openPage(item)"
                  [ngStyle]="item.link?.params?.itemCssStyle|styleFilter">
                  <span class="item-label"
                    [ngStyle]="item.link?.params?.labelCssStyle|styleFilter">{{item.label}}</span>
                  <h4 class="item-tips" [ngStyle]="item.link?.params?.tipsCssStyle|styleFilter">{{item.tips}}</h4>
                </li>
              </ng-container>
              <ng-container *ngIf="item.tips===undefined">
                <li class="link-item w25" appDebounceClick (debounceClick)="openModal(item)"
                  [ngStyle]="item.link?.params?.itemCssStyle|styleFilter">
                  <img class="item-img" alt="icon" src="{{item.iconName}}"
                    [ngStyle]="item.link?.params?.iconCssStyle|styleFilter"
                    onerror="this.src='assets/img/personal_center_icon_achievement_icon_yw@3x.png'">
                  <ion-badge *ngIf="item.count" class="badge" [ngStyle]="item.link?.params?.badgeCssStyle|styleFilter">
                    {{item.count}}</ion-badge>
                  <h4 class="item-title" [ngStyle]="item.link?.params?.labelCssStyle|styleFilter">{{item.label}}</h4>
                </li>
              </ng-container>

            </ng-container>
          </ng-container>
        </div>
      </ul>
    </ng-container>
  </ng-container>

  <!--1.6.33新增按钮-->
  <div class="bottomBox" *ngIf="tagData.data?.data?.data?.link?.params?.showExpendButton"
    [ngStyle]="tagData.data?.data?.data?.link?.params?.expendBoxCssStyle|styleFilter">
    <img class="expendImagUrl" id="{{expendIconId}}" *ngIf="tagData.data?.data?.data?.link?.params?.openImagUrl"
      [src]="tagData.data?.data?.data?.link?.params?.openImagUrl"
      onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1667800066095674c9d075dd52a2ebe563edbec6524c0.png'"
      [ngStyle]="tagData.data?.data?.data?.link?.params?.imagUrlCssStyle|styleFilter" appDebounceClick (debounceClick)="expend()" />
  </div>
</div>